import { useCallback, useState, useEffect, useRef } from "react";
import { useHistory, Link } from "react-router-dom";
import { DownOutlined } from "@ant-design/icons";
import { renderRoutes } from "react-router-config";
import { postOrders, postCondition } from "../../api/Orders"; //查询所有订单
import { Input, Select, Space, DatePicker, Button, Table, Tag } from "antd";

export default function Condition(props) {
  const obj = useRef({});
  const [first, setfirst] = useState([]);
  // 获取输入框
  const ChangeBtnAction = useCallback((ev) => {
    obj.current.key = ev.target.value;
  }, []);

  // 支付方式
  const paymentChange = useCallback((value) => {
    obj.current.paymentMethod = value;
  }, []);

  // 订单状态
  const StatusChange = useCallback((value) => {
    if (value == "待支付") {
      value = 1;
    } else if (value == "待配送") {
      value = 2;
    } else if (value == "配送中") {
      value = 3;
    } else if (value == "交易完成") {
      value = 4;
    } else {
      value = 5;
    }
    obj.current.state = value;

    // console.log(`订单状态 ${value}`);
  }, []);

  // 时间选择器
  const { RangePicker } = DatePicker;
  const TiemAction = useCallback((value) => {
    console.log(value[0], value[1]);
    const begin = value[0].$d.getTime();
    const endTime = value[1].$d.getTime();
    console.log("开始", begin);
    console.log("结束", endTime);
  });

  const [commodityData, setCommodityData] = useState([]);
  // 查询，获取数据
  const queryBtnAction = useCallback(async () => {
    let res = await postCondition(obj.current);
    setCommodityData(() => res.data.data);
  });

  const columns = [
    {
      title: "订单编号",
      dataIndex: "key",
      key: "Order_number",
    },
    {
      title: "下单时间",
      dataIndex: "time",
    },
    {
      title: "支付方式",
      dataIndex: "paymentMethod",
    },
    {
      title: "商品金额",
      dataIndex: "productAmount",
    },
    {
      title: "配送费",
      dataIndex: "deliveryFee",
    },
    {
      title: "实付金额",
      dataIndex: "payAmount",
    },
    {
      title: "商品数量",
      dataIndex: "productQuantity",
    },
    {
      title: "收货地址",

      render: (_, record) => (
        <Space size="middle">
          <Link
            to={{
              pathname: "/order/orderlist/OrderDetails",
              state: { name: record },
            }}
          >
            查看
          </Link>
          {/* <button onClick={btnAction}>查看</button> */}
        </Space>
      ),
    },
    {
      title: "订单状态",
      key: "Status",
      dataIndex: "state",
    },
    {
      title: "操作",
      key: "operate",
      render: (_, record) => (
        <Space size="middle">
          <Link
            to={{
              pathname: "/order/orderlist/OrderDetails",
              state: { name: record },
            }}
          >
            商品详情
          </Link>
          {/* <button onClick={() => btnAction(record)}>商品详情</button> */}
        </Space>
      ),
    },
  ];

  // 获取所有数据
  const getList = useCallback(async () => {
    const data = await postOrders();
    const list = data.data.data;

    list.map((item) => {
      // 处理时间
      console.log(item.time);
      let date = new Date(item.time);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      month = month > 9 ? month : "0" + month;
      let day = date.getDate();
      day = day > 9 ? day : "0" + day;
      let h = date.getHours();
      h = h > 9 ? h : "0" + h;
      let m = date.getMinutes();
      m = m > 9 ? m : "0" + m;
      let s = date.getSeconds();
      s = s > 9 ? s : "0" + s;
      let tie = `${year}-${month}-${day} ${h}:${m}:${s}`;
      item.time = tie;
      if (props.id == item.state) {
        setCommodityData((commodityData) => [...commodityData, item]);
      }
      if (item.state === 1) {
        item.state = "待支付";
      }
      if (item.state === 2) {
        item.state = "待配送";
      }
      if (item.state === 3) {
        item.state = "配送中";
      }
      if (item.state === 4) {
        item.state = "交易完成";
      }
      if (item.state === 5) {
        item.state = "交易关闭";
      }

      if (props.id === 0) {
        setCommodityData(() => list);
      }
    });
  }, []);

  // 调用函数
  useEffect(() => {
    getList();
  }, []);

  // 重置
  const resettingAction = useCallback(() => {
    getList();
  }, []);

  let history = useHistory();
  // 跳转到详情
  // const btnAction = useCallback(({ _id }) => {
  //   console.log(_id, "-----------");
  //   history.push(`${props.route[0].routes[0].path}`);
  // });
  return (
    <div>
      <Input
        placeholder="订单编号"
        onChange={ChangeBtnAction}
        style={{ width: "220px", margin: "0 10px 0 0" }}
      />

      <Select
        defaultValue="支付方式"
        style={{
          width: 120,
          margin: "0 10px 0 0",
        }}
        onChange={paymentChange}
        options={[
          {
            value: "/",
            label: "/",
          },
          {
            value: "微信",
            label: "微信",
          },
          {
            value: "花呗",
            label: "花呗",
          },
          {
            value: "支付宝",
            label: "支付宝",
          },
        ]}
      />

      <Select
        defaultValue="订单状态"
        style={{
          width: 120,
          margin: "0 10px 0 0",
        }}
        onChange={StatusChange}
        options={[
          {
            value: "待支付",
            label: "待支付",
          },
          {
            value: "待配送",
            label: "待配送",
          },
          {
            value: "配送中",
            label: "配送中",
          },
          {
            value: "交易完成",
            label: "交易完成",
          },

          {
            value: "交易关闭",
            label: "交易关闭",
          },
        ]}
      />
      <RangePicker style={{ margin: "0 10px 0 0" }} onChange={TiemAction} />
      <Button onClick={queryBtnAction}>查询</Button>
      <Button onClick={resettingAction}>重置</Button>
      <Table
        columns={columns}
        rowKey={(list) => {
          return list._id;
        }}
        pagination={{
          pageSize: 7, //七条数据一页
        }}
        dataSource={commodityData}
      />
    </div>
  );
}
